@import "../color-vars.scss";
.item-block {
	position: absolute;
	z-index: 9;
	box-sizing: border-box;
	min-width: 300px;
	max-width: 500px;
	overflow: hidden;
	.title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 22px;
		.icon {
			width: 18px;
			height: 18px;
			margin-right: 10px;
		}
		.text {
			font-size: 16px;
			font-weight: bold;
			color: $title-color;
			background-clip: text;
		}
		.ext-icon {
			display: flex;
			align-items: center;
			width: 120px;
			height: 8px;
			margin-left: 10px;
			background: linear-gradient(90deg, rgb(0 153 255 / 50%) 0%, rgb(0 153 255 / 0%) 100%);
			opacity: 0.3;
			&::before {
				display: block;
				width: 3px;
				height: 12px;
				content: "";
				background: #26cbf6;
				border-radius: 0;
				opacity: 1;
			}
		}
		.tips {
			position: absolute;
			right: 0;
			padding-right: 10px;
			font-size: 13px;
			font-weight: 500;
			color: $more-color;
			.value {
				width: 67px;
				height: 22px;
				padding-right: 10px;
				font-size: 16px;
				font-weight: bold;
				color: #0088ff;
			}
		}
	}
	.body {
		box-sizing: border-box;
		height: calc(100% - 22px);
		.subject {
			display: flex;
			align-items: center;
			padding-top: 10px;
			.icon {
				display: none;
				width: 46px;
				height: 46px;
			}
			.information {
				padding-left: 15px;
				.label {
					height: 20px;
					font-size: 14px;
					font-weight: 500;
					color: $sub-title-color;
				}
				.value {
					display: flex;
					align-items: flex-end;
					.text {
						height: 20px;
						font-family: Bahnschrift-Bold, Bahnschrift;
						font-size: 20px;
						font-weight: bold;
						color: $value-color;
					}
					.unit {
						height: 20px;
						padding-left: 8px;
						font-size: 13px;
						font-weight: 400;
						color: $more-color;
					}
				}
			}
		}
	}
}
